<template>
  <div class="mod-config hotelmemberleveldetail">
    <el-form :inline="true">
      <el-form-item label="" v-if="isAuth('hotel:hotelseller:list')">
       <el-select
          multiple
           collapse-tags
          clearable
          style="width:180px;"
          v-model="sellerIds"
          filterable
          remote
          reserve-keyword
          @change="selectSeller"
          placeholder="商家名称"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option v-for="item in platformSeller" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-if="isAuth('hotel:hotelmemberleveldetail:save')" type="primary" @click="registerCardHandler()">办卡</el-button>
<!--        <el-button v-if="isAuth('hotel:hotelmemberleveldetail:balanceChange')" type="primary" @click="balanceChange" :disabled="dataListSelections.length <= 0">
          余额调整
        </el-button> -->

        <el-button v-if="isAuth('hotel:hotelmemberleveldetail:save')" type="primary" @click="sendCouponsHandler(2)" :disabled="dataListSelections.length <= 0">
          发放优惠券
        </el-button>
        <el-button v-if="isAuth('hotel:hotelmemberleveldetail:save')" type="primary" @click="sendCouponsHandler(3)" :disabled="dataListSelections.length <= 0">
          发放早餐券
        </el-button>
        <el-button v-if="isAuth('hotel:hotelmemberleveldetail:save')" type="primary" @click="sendCouponsHandler(1)" :disabled="dataListSelections.length <= 0">
          发放免房券
        </el-button>
        <el-button v-if="isAuth('hotel:hotelmemberleveldetail:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">{{ $t('Common.BulkDelete') }}</el-button>
        <!-- <el-button type="primary" @click="(zhezhao = true), (showAlert = true)">导入</el-button> -->
        <el-button type="primary" @click="memberIntroduction()">导入</el-button>
        <!-- <el-button type="primary" @click="ImportBtn()">导入</el-button> -->
        <el-button type="primary" @click="exportBtn()">导出</el-button>
        <el-button type="primary" @click="shaixuan = !shaixuan">筛选</el-button>
        <el-button type="primary" v-show="!shaixuan" @click="clearShaiXuan">清空筛选</el-button>
      </el-form-item>

      <el-form-item style="float: right;"><el-switch v-model="shujubaobiao" inactive-color="#ff4949"></el-switch></el-form-item>

      <!-- @click="addOrUpdateHandle()" -->
    </el-form>

    <el-collapse-transition>
      <div v-show="shaixuan">
        <el-form :model="dataForm" @keyup.enter.native="getDataList()" label-width="120px">
          <el-form-item label="会员名称"><el-input style="width:180px;" v-model="dataForm.name" placeholder="会员名称" clearable></el-input></el-form-item>
          <el-form-item label="会员手机"><el-input style="width:180px;" v-model="dataForm.mobile" placeholder="会员手机" clearable></el-input></el-form-item>
          <el-form-item label="会员来源">
            <el-select
              clearable
              v-model="dataForm.source"
              style="width:180px;"
              placeholder="会员来源"
            >
              <el-option value="全部">全部</el-option>
              <el-option value="线下">线下</el-option>
              <el-option value="线上">线上</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员等级">
            <el-radio-group v-model="dataForm.levelid">
              <el-radio-button :label="0" >全部</el-radio-button>
              <el-radio-button v-for="item in hotelmemberlevelList" :key="item.id" :label="item.id" >{{item.name}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="会员分组">
            <el-radio-group v-model="dataForm.groupId">
              <el-radio-button :label="0" >全部</el-radio-button>
              <el-radio-button v-for="item in groupList" :key="item.id" :label="item.id" >{{item.name}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="会员标签">
            <el-radio-group v-model="dataForm.lableId">
              <el-radio-button :label="'全部'">全部</el-radio-button>
              <el-radio-button v-for="item in lableList" :key="item.id" :label="item.name" >{{item.name}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="客户流失">
            <el-radio-group v-model="dataForm.LossDate">
              <el-radio-button :label="'全部'" >全部</el-radio-button>
              <el-radio-button :label="30" >一个月没购买</el-radio-button>
              <el-radio-button :label="90" >三个月没购买</el-radio-button>
              <el-radio-button :label="180" >半年没购买</el-radio-button>
              <el-radio-button :label="365" >一年没购买</el-radio-button>
              <el-radio-button :label="0" >其他</el-radio-button>
            </el-radio-group>
            <div style="margin-left: 8px;display: inline-table;" v-show="dataForm.LossDate == 0">
              距今
              <el-input-number style="width: 120px;" v-model="dataForm.zidingyiLossDate" :step="1" step-strictly  :min="1" controls-position="right"></el-input-number>
              天
            </div>

          </el-form-item>
          <el-form-item label="过期时间">
            <el-radio-group v-model="dataForm.expireDate">
              <el-radio-button :label="0" >全部</el-radio-button>
              <el-radio-button :label="1" >已过期</el-radio-button>
              <el-radio-button :label="30" >近一个月</el-radio-button>
              <el-radio-button :label="60" >近三个月</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-date-picker v-model="otherDate" type="datetimerange" :picker-options="pickerOptions"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-delete" @click="clearShaiXuan">清空筛选</el-button>
            <el-button type="primary" icon="el-icon-search" @click="getDataList()">{{ $t('Common.Query') }}</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-collapse-transition>

    <el-collapse-transition>
      <div v-show="shujubaobiao">
        <!-- 数据报表 -->
        <el-row :gutter="12" class="memberreport" id="memberreport">
          <el-col :span="6" class="memberlistreport">
            <el-card shadow="hover">
              <div class="memberreporttitle center-footer-box">
                今日过生日的会员
                <a href="javascript: void(0);" id="memberBirthdaytodate" class="details fr" @click="todayBathday()">详情</a>
              </div>
              <div class="center-box amountcolor6">
                <span class="membernumber" id="bircount">{{ baobiaoshuju.TodayBirthdayCounts }}</span>
                <span class="mumberunit">位</span>
              </div>
              <div class="center-footer-box">
                <p>
                  本月还有
                  <i class="nembercolor" id="mbircount">{{ baobiaoshuju.BirthdayOfThisMonthCounts }}</i>
                  位会员生日
                </p>
                <a href="javascript: void(0);" id="memberBirthdayCount" class="details fr" @click="monthBathday()">详情</a>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" class="memberlistreport">
            <el-card shadow="hover">
              <div class="memberreporttitle" id="">
                <span class="fl">会员总数</span>
                <!--                <span class="fr">
                  储值卡总额:
                  <i class="colorff" id="blanceamount">12723356.79</i>
                </span> -->
              </div>
              <div class="center-box amountcolor6">
                <span class="membernumber" id="usercount">{{ baobiaoshuju.TotalMembership }}</span>
                <span class="mumberunit">位</span>
              </div>
              <div class="center-footer-box">
                <p class="paright">
                  今日新增
                  <i class="icon-angle-right"></i>
                  <i class="nembercolor" id="averageUser">{{ baobiaoshuju.AverageMemberNewCounts }}</i>
                  位会员
                </p>
                <a href="javascript: void(0);" id="memberBirthdayCount" class="details fr" @click="newAddMember()">详情</a>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" class="memberlistreport">
            <el-card shadow="hover">
              <div class="memberreporttitle">累计消费</div>
              <div class="center-box amountcolor6">
                <span class="membernumber" id="receivable_count">{{ parseFloat(baobiaoshuju.CumulativeConsumption).toFixed(2) }}</span>
                <span class="mumberunit">元</span>
              </div>
              <div class="center-footer-box">
                <p class="paright">
                  今日已有
                  <i class="nembercolor" id="averageUser">{{ baobiaoshuju.TodayMemberConsumption }}</i>
                  位会员消费
                  <i class="icon-angle-right"></i>
                  <i class="nembercolor" id="averageUser">{{ parseFloat(baobiaoshuju.TodayConsumptionMoney).toFixed(2) }}</i>
                  元
                </p>
                <a href="javascript: void(0);" id="memberBirthdayCount" class="details fr" @click="todayXiaoFeiMember()">详情</a>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6" class="memberlistreport">
            <el-card shadow="hover">
              <div class="memberreporttitle">消费会员(TOP3)</div>
              <ul class="center-top-box" id="topList">
                <li class="top-list" v-for="(item, index) in baobiaoshuju.ConsumptionTopList" :key="index" v-if="index < 3">
                  <div class="membertopname fl">
                    <i>{{ index + 1 }}.</i>
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="membertopmoney fr">
                    <span class="money">{{ parseFloat(item.totalCost).toFixed(2) }}</span>
                    <i class="pad">元</i>
                  </div>
                </li>
                <p v-show="baobiaoshuju.ConsumptionTopList.length == 0" style="display: none;">暂无</p>
              </ul>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>


    <!-- 数据表格 -->
    <el-table :data="dataList" border="" row-key="userId" v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="sellerName" header-align="center" align="center" label="商家">
        <template slot-scope="scope">
          <span>{{ scope.row.sellerName ? scope.row.sellerName : '管理员' || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="img" header-align="center" align="center" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.img" alt="" style="with:30px;height:30px" />
        </template>
      </el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="姓名">
        <template slot-scope="scope">
          <el-link style="color: #409eff;cursor: pointer;" type="primary" @click="memberDetail(scope.row)">
            {{ scope.row.name?scope.row.name:'--' }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="tel" header-align="center" align="center" width="150" label="手机">
        <template slot-scope="scope">
          <span v-if="scope.row.tel">{{ scope.row.tel }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="gender" header-align="center" align="center" label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.gender == '1' ? '男' : '女' || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cardNo" header-align="center" align="center" width="200" label="卡号">
        <template slot-scope="scope">
          <span v-if="scope.row.cardNo">{{ scope.row.cardNo }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="id" header-align="center" align="center" label="是否本店会员">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.id" size="small">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column prop="levelName" header-align="center" align="center" label="会员类型">
        <template slot-scope="scope">
          <span v-if="scope.row.levelName">{{ scope.row.levelName }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="certificateNo" header-align="center" align="center" width="200" label="证件号">
        <template slot-scope="scope">
          <span v-if="scope.row.certificateNo">{{ scope.row.certificateNo }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>


      <el-table-column prop="birthday" header-align="center" align="center" label="生日" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.birthday">{{ scope.row.birthday }}</span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>

      <el-table-column prop="createDate" header-align="center" align="center" width="200" label="创建时间"></el-table-column>
      <el-table-column prop="salesman" header-align="center" align="center" label="推荐员工">
        <template slot-scope="scope">
          <span v-if="scope.row.salesman">{{ scope.row.salesman }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column prop="score" header-align="center" align="center" label="可用积分">
        <template slot-scope="scope">
          <span v-if="scope.row.score">{{ scope.row.score }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column prop="balance" header-align="center" align="center" label="可用余额">
        <template slot-scope="scope">
          <span v-if="scope.row.balance">{{ scope.row.balance }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalScore" header-align="center" align="center" label="累计积分">
        <template slot-scope="scope">
          <span v-if="scope.row.totalScore">{{ scope.row.totalScore }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalBalance" header-align="center" align="center" label="累计余额">
        <template slot-scope="scope">
          <span v-if="scope.row.totalBalance">{{ scope.row.totalBalance }}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
     <el-table-column prop="labelList" header-align="center" align="center" label="标签" width="200px">
        <template slot-scope="scope">
          <span v-if="scope.row.labelList">
            <el-tag
              v-for="(tag,index) in scope.row.labelEntityLists"
              :key="tag.id"
              @close="closeTag(scope.row.labelEntityLists,tag,index,scope.row.id)"
              :disable-transitions="false"
              closable>
              {{tag.name}}
            </el-tag>
          </span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>
      <el-table-column prop="groupName" header-align="center" align="center" label="分组">
        <template slot-scope="scope">
          <span v-if="scope.row.groupName">{{ scope.row.groupName }}</span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>

      <el-table-column prop="source" header-align="center" align="center" label="来源">
        <template slot-scope="scope">
          <span v-if="scope.row.source">{{ scope.row.source }}</span>
          <span v-else>暂无</span>
        </template>
      </el-table-column>


      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('hotel:hotelmemberleveldetail:integralChange')" type="text" size="small" @click="integralChangeBtn(scope.row.id)">积分调整</el-button>
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;float: left;">
      <el-select
        v-if="isAuth('hotel:hotelmemberleveldetail:setGroup')"
        @change="changeGroup"
        v-model="setGroup"
        :disabled="dataListSelections.length <= 0"
        placeholder="请选择分组"
      >
        <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-select
        v-if="isAuth('hotel:hotelmemberleveldetail:setLable')"
        @change="changelable"
        v-model="setLable"
        :disabled="dataListSelections.length <= 0"
        placeholder="请选择标签"
      >
        <el-option v-for="item in lableList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div>


    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>


    <div style="float: left;margin-top: 20px;margin-bottom: 20px;">
      <span>积分：</span><span style="margin-right: 18px;">{{parseFloat(pageCountMoney).toFixed(2)}}分</span>
      <span>累计积分：</span><span style="margin-right: 18px;">{{parseFloat(pageCountkfMoney).toFixed(2)}}分</span>
      <span>余额：</span><span style="margin-right: 18px;">{{parseFloat(pageCounttkMoney).toFixed(2)}}元</span>
      <span>累计余额：</span><span style="margin-right: 18px;">{{parseFloat(pageCountytMoney).toFixed(2)}}元</span>
    </div>

    <!-- 遮罩 -->
    <div class="zezhao" v-show="zhezhao"></div>
    <!-- 导入弹窗 -->
    <div class="showAlert" v-show="showAlert">
      <div class="alertHeader">
        <p style="line-height: 50px;">导入会员</p>
        <i class="el-icon-close" @click="(showAlert = false), (zhezhao = false)"></i>
      </div>
      <div class="alertCon">
        <el-row>
          <el-col :span="12">
            <ul class="description">
              <li><h5 class="text-center">说明</h5></li>
              <li class="descriptionli">1、在【会员等级】中配置需要导入的会员等级</li>
              <li class="descriptionli">2、下载会员导入模板Excel文件</li>
              <li class="descriptionli">3、根据模板内容填写，确保模板内填写等级与【会员等级】上等级名称一致</li>
              <li class="descriptionli">4、上传并导入会员信息。[系统会自动跳过身份证、会员卡号一致的记录]</li>
              <li class="descriptionli">
                <p>
                  <i class="colorff">*</i>
                  &nbsp;为保障导入成功，建议每次最多导入
                  <i class="colorff">500</i>
                  条会员信息
                </p>
              </li>
            </ul>
          </el-col>
          <el-col :span="12">
            <div class="updownmemberlistbox">
              <div class="col-xs-6">
                <ul class="downtemplate">
                  <li class="templatestep"><i class="step1">1</i></li>
                  <li class="templatecenter">
                    <a href="javascript:void(0);" id="updowmembersTemplete" @click="excel_templateBtn()"><img src="./img/updowmbg.png" /></a>
                  </li>
                  <li class="templatestep">下载模板</li>
                </ul>
              </div>
              <div class="col-xs-6">
                <ul class="downtemplate">
                  <li class="templatestep"><i class="step1">2</i></li>
                  <li class="templatecenter">
                    <el-upload
                      class="upload-demo"
                      ref="upload"
                      :action="excel_import_url()"
                      :file-list="fileList"
                      :on-success="importsuccess"
                      :before-upload="excel_import"
                      :with-credentials="true"
                      :show-file-list="false"
                    >
                      <a href="javascript:void(0);"><img src="./img/updowmbg1.png" /></a>
                    </el-upload>
                  </li>
                  <li class="templatestep">导入会员列表</li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 会员导入子页面 -->
    <memberIntroduction v-if="memberIntroductionVisible" ref="memberIntroduction" @refreshDataList="getDataList"></memberIntroduction>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <CouponsSelect v-if="couponsSelectVisible" ref="couponsSelect" @refreshDataList="getDataList"></CouponsSelect>
    <integralChange v-if="integralChangeVisible" ref="integralChange" @refreshDataList="getDataList"></integralChange>
    <memberDetail v-if="memberDetailVisible" ref="memberDetail" @refreshDataList="getDataList"></memberDetail>
  </div>
</template>

<script>
import Vue from 'vue';
import AddOrUpdate from './hotelmemberleveldetail-add-or-update';
import integralChange from './integralChange';
import CouponsSelect from '../../../../components/coupons-select';
import memberDetail from './memberDetail';
import memberIntroduction from './memberIntroduction';
export default {
  data() {
    return {
      otherDate: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '最近半年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      shaixuan: false,
      setGroup: '',
      setLable: '',
      lableList: [],
      groupList: [],
      baobiaoshuju: {
        //今日有多少过生日的
        TodayBirthdayCounts: 0,
        //本月还有多少
        BirthdayOfThisMonthCounts: 0,
        //会员总数
        TotalMembership: 0,
        //平均每日新增会员
        AverageMemberNewCounts: 0,
        //累计消费金额
        CumulativeConsumption: 0.0,
        //今日已消费会员数
        TodayMemberConsumption: 0,
        //今日消费金额
        TodayConsumptionMoney: 0.0,
        //消费会员(TOP3)
        ConsumptionTopList: []
      },
      zhezhao: false,
      showAlert: false,
      loading: false,
      platformSeller: [],
      dataForm: {
        sellerId: '',
        name: '',
        mobile: '',
        //type 1今日过生日的会员   2本月还有多少过生日的会员
        type: '',
        source: '全部',
        groupId: 0,
        lableId: '全部',
        otherDate: '',
        expireDate: 0,
        LossDate:'全部',
        zidingyiLossDate:1,
        levelid:0,
      },
      tongjiBtnForm:{
        todayBathday:false,
        monthBathday:false,
        newAddMember:false,
        todayXiaoFeiMember:false,
      },
      sellerIds:[],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      couponsSelectVisible: false,
      integralChangeVisible: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      memberDetailVisible: false,
      memberIntroductionVisible: false,
      fileList: [],
      shujubaobiao: true,
      hotelmemberlevelList:[],
      pageCountMoney:0,
      pageCountkfMoney:0,
      pageCounttkMoney:0,
      pageCountytMoney:0,
    };
  },
  components: {
    AddOrUpdate,
    CouponsSelect,
    integralChange,
    memberDetail,
    memberIntroduction
  },
  activated() {
    this.getDataList();
    this.getlableList();
    this.getgroupList();
    this.gethotelmemberlevelList();
    this.remoteMethod();
  },
  methods: {
    //关闭标签
    closeTag(obj,tag,index,id){
      this.loading = true;
      obj.splice(obj.indexOf(tag), 1);
      // obj.splice(obj.indexOf(index), 1);
      // Vue.set(obj,index,false);
      //发送请求
      this.$http({
        url: this.$http.adornUrl(
          `/hotel/hotelmemberleveldetail/update`
        ),
        method: "post",
        data: this.$http.adornData({
          id: id,
          labelList: JSON.stringify(obj)
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else {
          this.$message.error(data.msg);
        }
        this.loading = false;
      });
    },
    //获取会员等级
    gethotelmemberlevelList(){
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelmemberlevel/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 0,
          limit: 999
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.hotelmemberlevelList = data.page.list;
        } else {
          this.hotelmemberlevelList = [];
        }
      });
    },
    //改变分组
    changeGroup(value) {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/setGroup'),
        method: 'POST',
        data: this.$http.adornData({
          ids: this.dataListSelections.map(item => {
            return item.id;
          }),
          id: value
        })
      }).then(({ data }) => {
        this.loading = false;
        if (data && data.code === 0) {
          this.$message({
            message: this.$t('Common.OperationSuccessful'),
            type: 'success'
          });
          this.setGroup = '';
          this.getDataList();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //改变标签
    changelable(value) {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/setLable'),
        method: 'POST',
        data: this.$http.adornData({
          ids: this.dataListSelections.map(item => {
            return item.id;
          }),
          id: value
        })
      }).then(({ data }) => {
        this.loading = false;
        if (data && data.code === 0) {
          this.$message({
            message: this.$t('Common.OperationSuccessful'),
            type: 'success'
          });
          this.setLable = '';
          this.getDataList();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //获取标签列表
    getlableList() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelmemberlabel/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: 0,
          limit: 999
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.lableList = data.page.list;
        } else {
          this.lableList = [];
        }
      });
    },
    //获取分组列表
    getgroupList() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelmembergroup/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: 0,
          limit: 999
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.groupList = data.page.list;
        } else {
          this.groupList = [];
        }
      });
    },
    //获取视图数据
    getBaobiaoshuju() {
      this.$http({
        url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/view_data'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.baobiaoshuju.TodayBirthdayCounts = data.TodayBirthdayCounts;
          this.baobiaoshuju.BirthdayOfThisMonthCounts = data.BirthdayOfThisMonthCounts;
          this.baobiaoshuju.AverageMemberNewCounts = data.AverageMemberNewCounts;
          this.baobiaoshuju.TodayMemberConsumption = data.TodayMemberConsumption;
          this.baobiaoshuju.TodayConsumptionMoney = data.TodayConsumptionMoney;
          this.baobiaoshuju.CumulativeConsumption = data.CumulativeConsumption;
          this.baobiaoshuju.ConsumptionTopList = data.ConsumptionTopList;
          this.baobiaoshuju.TotalMembership = data.TotalMembership;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //exportBtn导出
    exportBtn() {
      window.open(this.$http.adornUrl(`/hotel/hotelmemberleveldetail/excel_export`));
    },
    //模板下载
    excel_templateBtn() {
      window.open(this.$http.adornUrl(`/hotel/hotelmemberleveldetail/excel_template`));
    },
    //excel导入格式判断
    excel_import(file) {
      console.log(file);
      var type = file.type;
    },
    //导入回调
    importsuccess(response, file, fileList) {
      let that = this;
      if (response && response.code === 0) {
        this.$message({
          type: 'success',
          message: response.msg
        });
        this.getDataList();
      } else {
        this.$message({
          type: 'error',
          message: response.msg
        });
      }
    },
    // excel文件导入路径
    excel_import_url() {
      return this.$http.adornUrl(`/hotel/hotelmemberleveldetail/excel_import`);
    },
    selectSeller(id, value) {
      this.getDataList()
    },
    //加载平台商家数据
    remoteMethod(query) {
      if(this.isAuth('hotel:hotelseller:list')){
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
          method: "get",
          params: this.$http.adornParams({
            sellerName: query
          })
        }).then(({ data }) => {
          this.loading = false;
          if (data && data.code === 0) {
            this.platformSeller = data.page.list;
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
    //清空筛选
    clearShaiXuan(){
      Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
      Object.assign(this.dataForm, this.$options.data().dataForm)
      this.getDataList();
    },
    //今日消费会员
    todayXiaoFeiMember(){
      Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
      this.tongjiBtnForm.todayXiaoFeiMember = true;
      this.getDataList();
    },
    //今日新增会员
    newAddMember(){
      Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
      this.tongjiBtnForm.newAddMember = true;
      this.getDataList();
    },
    //本月还有几位过生日的
    monthBathday(){
      Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
      this.tongjiBtnForm.monthBathday = true;
      this.getDataList();
    },
    //今日过生日的会员
    todayBathday(){
      Object.assign(this.tongjiBtnForm, this.$options.data().tongjiBtnForm)
      this.tongjiBtnForm.todayBathday = true;
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.getBaobiaoshuju();
      if(this.dataForm.LossDate == 0){
        if(!this.dataForm.zidingyiLossDate){
          this.$message.error("客户流失距今天数不可为空或0");
          return
        }
      }
      this.dataListLoading = true;
      if (this.otherDate) {
        const start = Date.parse(new Date(this.otherDate[0])) / 1000;
        const end = Date.parse(new Date(this.otherDate[1])) / 1000;
        this.dataForm.otherDate = start + "," + end
        console.log(this.dataForm.otherDate)
      }
      var ids = ""
      if(this.sellerIds){
        this.sellerIds.forEach((item,index) =>{
          ids+=item+","
        })
        ids = ids.substring(0,ids.length-1)
      }
      this.$http({
        url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          ...this.dataForm,
          ids:ids,
          ...this.tongjiBtnForm
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data.page);
          this.dataList = data.page.records;
          this.totalPage = data.page.total;
          this.pageCountMoney=0
          this.pageCountkfMoney=0
          this.pageCounttkMoney=0
          this.pageCountytMoney=0
          this.dataList.forEach((item,index) =>{
            this.pageCountMoney += item.score
            this.pageCountkfMoney += item.totalScore
            this.pageCounttkMoney += item.balance
            this.pageCountytMoney += item.totalBalance
          })
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // //批量排房
    // batchRowRoomBtn(){

    // },
    // //批量入住
    // batchRowRoomBtn(){

    // },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    //发放优惠券

    sendCouponsHandler(type) {
      this.couponsSelectVisible = true;
      this.$nextTick(() => {
        this.$refs.couponsSelect.init(type, this.dataListSelections);
      });
    },
    //办卡
    registerCardHandler() {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init();
      });
    },
    //调整积分
    integralChangeBtn(id) {
      this.integralChangeVisible = true;
      this.$nextTick(() => {
        this.$refs.integralChange.init(id);
      });
    },
    //会员详情
    memberDetail(row) {
      this.memberDetailVisible = true;
      this.$nextTick(() => {
        this.$refs.memberDetail.init(row);
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    //导入
    memberIntroduction(){
      this.memberIntroductionVisible = true;
      this.$nextTick(() => {
        this.$refs.memberIntroduction.init();
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>

<style>
.hotelmemberleveldetail .zezhao {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: #000;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.hotelmemberleveldetail .showAlert {
  width: 700px;
  height: 450px;
  position: fixed;
  top: calc((100vh - 450px) / 2);
  left: calc((100vw - 700px) / 2);
  background: white;
  z-index: 999999;
  box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}
.hotelmemberleveldetail .showAlert .alertHeader {
  text-align: center;
}

.hotelmemberleveldetail .showAlert .alertHeader p {
  display: inline-table;
}

.hotelmemberleveldetail .showAlert .alertHeader i {
  float: right;
  display: inline-table;
  font-size: 22px;
  line-height: 40px;
  margin-right: 8px;
  cursor: pointer;
}

.hotelmemberleveldetail .alertCon {
  width: 96%;
  margin: 0px auto;
  height: 60%;
}
.hotelmemberleveldetail .description {
  border: 1px solid #eaeaea;
  position: relative;
  width: 310px;
  padding: 10px;
  margin: auto;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  font-size: 14px;
}
.hotelmemberleveldetail li {
  list-style: none;
}
.hotelmemberleveldetail .description li.descriptionli {
  padding-bottom: 10px;
  line-height: 20px;
}
.hotelmemberleveldetail .description li.descriptionli .descriptionp {
  text-indent: 1em;
}
.hotelmemberleveldetail .description li.descriptionli .colorff {
  color: #f00;
}
.hotelmemberleveldetail .updownmemberlistbox {
  margin: auto;
  position: relative;
  width: 310px;
  height: 210px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.hotelmemberleveldetail .updownmemberlistbox .col-xs-6 {
  height: 210px;
}
.hotelmemberleveldetail .col-xs-6 {
  float: left;
  width: 50%;
}
.hotelmemberleveldetail .updownmemberlistbox .downtemplate {
  width: 100%;
}
.hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatestep {
  height: 50px;
  line-height: 50px;
  position: relative;
  text-align: center;
}
.hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatecenter {
  height: 110px;
  position: relative;
}
.hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatestep .step1 {
  display: block;
  width: 25px;
  height: 25px;
  line-height: 25px;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  background-color: #f66;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatecenter a {
  display: block;
  height: 110px;
  width: 125px;
}
.hotelmemberleveldetail .updownmemberlistbox .downtemplate .templatecenter img {
  position: absolute;
  border: none;
  display: block;
  width: 110px;
  height: 110px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: -1;
}
.memberreport {
  margin-bottom: 18px;
}
.memberreport .memberlistreport .memberreportsmbox {
  padding-left: 20px;
}
.memberreport .memberlistreport .center-footer-box {
  height: 36px;
  line-height: 30px;
  font-size: 12px;
  position: relative;
}
.memberreport .memberlistreport .memberreporttitle {
  padding-top: 3px;
  height: 30px;
  line-height: 30px;
  padding-right: 8px;
}
.memberreport .memberlistreport .center-footer-box .details {
  display: block;
  width: 38px;
  height: 20px;
  line-height: 19px;
  background-color: #07c9de;
  font-size: 12px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  position: absolute;
  right: 20px;
  top: 5px;
  transition: 0.35s;
}
.fr {
  float: right;
}
a {
  text-decoration: none;
}
.memberreport .memberlistreport .center-box {
  height: 90px;
  width: 100%;
  text-align: center;
  line-height: 90px;
  position: relative;
}
.amountcolor6 {
  color: #ff5400;
}
.memberreport .memberlistreport .membernumber {
  font-size: 34px;
}
.memberreport .memberlistreport .mumberunit {
  font-size: 18px;
}
.memberreport .memberlistreport .center-footer-box {
  height: 36px;
  line-height: 30px;
  font-size: 12px;
  position: relative;
}
.memberreport .memberlistreport .center-footer-box p {
  margin: 0;
  padding-right: 75px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.memberreport .memberlistreport .center-footer-box .nembercolor {
  color: #ff5400;
  padding-left: 3px;
  padding-right: 3px;
}
.memberreport .memberlistreport .center-footer-box .details {
  display: block;
  width: 38px;
  height: 20px;
  line-height: 19px;
  background-color: #07c9de;
  font-size: 12px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  position: absolute;
  right: 20px;
  top: 5px;
  transition: 0.35s;
}
.memberreport .memberlistreport .memberreporttitle {
  padding-top: 3px;
  height: 30px;
  line-height: 30px;
  padding-right: 8px;
}
.fl {
  float: left;
}
.colorff {
  color: #f00;
}
.memberreport .memberlistreport .center-box {
  height: 90px;
  width: 100%;
  text-align: center;
  line-height: 90px;
  position: relative;
}
.memberreport .memberlistreport .center-footer-box {
  height: 36px;
  line-height: 30px;
  font-size: 12px;
  position: relative;
}
.memberreport .memberlistreport .center-footer-box .paright {
  padding-right: 0;
}

.memberreport .memberlistreport .center-footer-box p {
  margin: 0;
  padding-right: 75px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.memberreport .memberlistreport .center-footer-box .nembercolor {
  color: #ff5400;
  padding-left: 3px;
  padding-right: 3px;
}
.memberreport .memberlistreport .memberreporttitle {
  padding-top: 3px;
  height: 30px;
  line-height: 30px;
  padding-right: 8px;
}
.memberreport .memberlistreport .center-box {
  height: 90px;
  width: 100%;
  text-align: center;
  line-height: 90px;
  position: relative;
}
.memberreport .memberlistreport .center-top-box {
  height: 90px;
  width: 100%;
}
.memberreport .memberlistreport .center-top-box li {
  width: 100%;
  height: 30px;
  overflow: hidden;
  margin: 0;
}
.memberreport .memberlistreport .top-list {
  height: 30px;
  line-height: 30px;
}
.memberreport .memberlistreport .membertopname {
  display: block;
}
.memberreport .memberlistreport .center-top-box li .membertopmoney {
  height: 30px;
}
.memberreport .memberlistreport .center-top-box li .money {
  font-size: 20px;
  color: #ff5400;
}
.pad {
  padding-left: 2px;
  padding-right: 2px;
}





</style>
